<template>
  <div class="container">
    <div class="content">
      <div class="content_text">
        {{ phone ? "验证当前登录账号的手机号" : "您可关联新的手机号" }}
      </div>
      <div class="content_tip">
        {{
          phone
            ? "需要验证你的手机号进行下一步操作"
            : "更换成功后，可使用新的手机号作为登录账号"
        }}
      </div>
      <div class="changePhone_all" v-if="!phone">
        <text class="region">+86</text>
        <input
          class="change_phone"
          maxlength="11"
          v-model="changePhone"
          type="text"
          placeholder="请输入手机号"
        />
      </div>
      <div class="content_phone" v-if="phone">
        {{ phone }}
      </div>
      <div class="get_verification_code">
        <div class="flex">
          <input
            class="verCode_value"
            maxlength="6"
            v-model="verCode"
            type="text"
            placeholder="请输入手机验证码"
          />
          <van-icon
            v-if="verCode"
            @click="clearVerCode"
            class="close_icon"
            name="close"
          />
        </div>
        <div class="flex">
          <text @click="getCode" v-if="ifSend" class="verCode_text">{{
            ifFistClick ? "获取验证码" : "重新获取"
          }}</text>
          <text class="verCode_text" v-else>{{ second }}S</text>
        </div>
      </div>
    </div>
    <div class="btns">
      <div @click="submitCode" v-if="verCode.length == 6" class="next_step">
        {{ phone ? "下一步" : "更换" }}
      </div>
      <div v-if="verCode.length != 6" class="disabled">
        {{ phone ? "下一步" : "更换" }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "getVerCode",
  props: {
    phone: {
      type: [String],
      required: false,
      default: "",
    },
  },
  data() {
    return {
      changePhone: "",
      verCode: "",
      ifSend: true,
      ifFistClick: true,
      second: "",
    };
  },
  onShow() {},
  onLoad(option) {},
  methods: {
    clearVerCode() {
      this.verCode = "";
    },
    getCode() {
      if (!this.phone) {
        if (!this.changePhone) {
          uni.showToast({
            title: "请输入手机号",
            icon: "none",
          });
          return;
        }
        if (!/^1[3456789]\d{9}$/.test(this.changePhone)) {
          uni.showToast({
            title: "请输入正确的手机号",
            icon: "none",
          });
          return;
        }
      }
      if (!this.ifSend) {
        return;
      }
      this.ifFistClick = false;
      this.second = 60;
      this.ifSend = false;
      let time = null;
      clearInterval(time);
      time = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          clearInterval(time);
          this.ifSend = true;
        }
      }, 1000);
    },
    submitCode() {
      if (this.phone) {
        uni.navigateTo({
          url: "/pages_mine/mine/updatePhoneNumber",
        });
      } else {
        this.$emit("submitData", this.changePhone);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 750rpx;
  min-height: 100vh;
  background: #FAFAFA;
  padding: 66rpx 32rpx;
  box-sizing: border-box;
  .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    .content_text {
      font-size: 40rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
    .content_tip {
      margin-top: 12rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .content_phone {
      margin-top: 64rpx;
      font-size: 40rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
    .get_verification_code {
      width: 100%;
      margin-top: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx 0 0;
      box-sizing: border-box;
      .verCode_value {
        width: 240rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
      .close_icon {
        margin-left: 12rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
      }
      .verCode_text {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff4d03;
      }
    }
  }
  .changePhone_all {
    margin-top: 64rpx;
    width: 100%;
    display: flex;
    .region {
      margin-right: 32rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
    .change_phone {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      flex: 1;
    }
  }
  .btns {
    margin-top: 64rpx;
    width: 100%;
    .disabled {
      width: 100%;
      height: 88rpx;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%);
      border-radius: 44rpx;
      opacity: 0.4;
    }
    .next_step {
      @include btn_plain_line(
        linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%),
        #ffffff,
        #ff9a00
      ) {
        width: 100%;
        height: 88rpx;
        border-radius: 44rpx;
      }
    }
  }
}
</style>
